<template>
    <div>
        <!-- 表格 -->
        <el-table :data="typeData" style="width: 80%;margin: 0 auto;">
            <el-table-column prop="id" label="id" align="center"></el-table-column>
            <el-table-column prop="name" label="商品类别名称" align="center"></el-table-column>
            <el-table-column prop="priority" label="类别优先级" align="center"></el-table-column>
            <el-table-column label="操作" fixed="right" align="center">
                <template #default="scope">
                    <el-tooltip effect="dark" placement="bottom" content="编辑">
                        <el-button type="primary" :icon="Edit" circle
                            @click="currentDataChange(scope.row, currentType); ShowStatus.editType = true;" />
                    </el-tooltip>
                    <el-tooltip effect="dark" placement="bottom" content="删除">
                        <el-button type="danger" :icon="Delete" circle @click="deleteType(scope.row.id)" />
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加类型 -->
        <el-button id="addType" @click="ShowStatus.addType = true">添加类别</el-button>
        <!-- 添加对话框 -->
        <el-dialog v-model="ShowStatus.addType" title="添加商品类型">
            <el-form :model="addTypeData" ref="addTypeForm" label-position="top" :rules="formRuleEditType">
                <el-form-item prop="name" label="类型名称">
                    <el-input v-model="addTypeData.name" placeholder="请输入类型名称" clear></el-input>
                </el-form-item>
                <el-form-item prop="priority" label="类型优先级">
                    <el-input-number v-model="addTypeData.priority" size="large" :step="1" :min="1" :max="10" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="ShowStatus.addType = false">取消</el-button>
                    <el-button type="primary" @click="submitAddType(); ShowStatus.addType = false;">提交</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑对话框 -->
        <el-dialog v-model="ShowStatus.editType" title="编辑商品类型">
            <el-form ref="editTypeForm" :model="currentType" label-position="top" :rules="formRuleEditType">
                <el-form-item prop="id">
                    <span>类型id：{{ currentType.id }}</span>
                </el-form-item>
                <el-form-item prop="name" label="类型名称">
                    <el-input v-model="currentType.name" placeholder="请输入类型名称" clear></el-input>
                </el-form-item>
                <el-form-item prop="priority" label="类型优先级">
                    <el-input-number v-model="currentType.priority" size="large" :step="1" :min="1" :max="10" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="ShowStatus.editType = false">取消</el-button>
                    <el-button type="primary" @click="submitEditType(); ShowStatus.editType = false;">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { Edit, Delete } from '@element-plus/icons-vue';
import { ref, onMounted, reactive, getCurrentInstance } from 'vue'
import { getData, currentDataChange } from '../utils/GeneralTool' // 导入全局工具
import { ElNotification, ElMessageBox } from 'element-plus'
import router from '@/router';
const { proxy } = getCurrentInstance()
// --获取类别数据--
let typeData = ref([])
onMounted(() => {
    proxy.$api.getAllType()
        .then(res => {
            getData(res, typeData)
        })
})

// --编辑类别数据--
let currentType = reactive({})
let ShowStatus = reactive({
    editType: false,
    addType: false,
})
const formRuleEditType = reactive({
    name: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
})
let editTypeForm = ref()
const submitEditType = async () => { // 提交编辑
    await editTypeForm.value.validate((valid) => {
        if (valid) {
            proxy.$api.updateType(currentType)
                .then(res => {
                    if (res.affectedRows) {
                        ElNotification({
                            title: '提交成功',
                            type: 'success'
                        })
                        router.go(0)
                    } else {
                        ElNotification({
                            title: '提交失败，存入数据库失败',
                            type: 'error'
                        })
                    }
                })
        } else {
            ElNotification({
                title: '提交失败，请完善类型信息',
                type: 'error'
            })
        }
    })
}

// --添加类型数据--
let addTypeData = reactive({ priority: 1, name: null })
const addTypeForm = ref()
const submitAddType = async () => {
    await addTypeForm.value.validate((valid) => {
        if (valid) {
            let data = {
                name: addTypeData.name,
                priority: addTypeData.priority
            }
            proxy.$api.addType(data)
                .then(res => {
                    if (res.affectedRows) {
                        ElNotification({
                            title: '提交成功',
                            type: 'success'
                        })
                        data.id = res.insertId
                        typeData.value.push(data)
                    } else {
                        ElNotification({
                            title: '提交失败，存入数据库失败',
                            type: 'error'
                        })
                    }
                })
        } else {
            ElNotification({
                title: '提交失败，请完善类型信息',
                type: 'error'
            })
        }
    })
}

// --删除类型数据--
const deleteType = (id) => {
    ElMessageBox.confirm(
        '是否删除该类型？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        proxy.$api.deleteType([id])
            .then(res => {
                if (res.affectedRows) {
                    ElNotification({
                        title: '删除成功',
                        type: 'success'
                    })
                    router.go(0)
                } else {
                    ElNotification({
                        title: '删除失败，数据库存入失败！',
                        type: 'error'
                    })
                }
            })
    }).catch(() => { })
}
</script>

<style lang="scss" scoped>
#addType {
    margin: 0 auto;
    display: block;
    margin-top: 2rem;
    width: 50%;
    height: 5rem;
    font-size: 3rem;
}
</style>
<style scoped>
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: hidden;
}
</style>